<template>
	<view class="con">
		<!-- 过滤 -->
		<view class="guolv flex flex_between">
			<view class="guolv_v1">过滤已补贴</view>
			<switch checked color="#f9bf41" style="transform:scale(0.5)" />
		</view>
		<!-- 列表 -->
		<view class="list">
			<!-- 每一个li -->
			<view class="listli" @click="showTan">
				<view class="listlit flex flex_between">
					<view class="listlitz">
						<image class="listlitz_img" src="/static/index/img14.png" mode="widthFix"></image>
						<!-- <view class="listlitz_1">express</view> -->
						<view class="listlitz_2">乾遇官方旗舰店</view>
					</view>
					<view class="listlity">
						<view class="listlity1 flex flex_between">
							<view class="listlity1z flex flex_between">
								<view class="listlity1z1 flex">
									<image class="listlity1z1_img" src="/static/index/img15.png" mode="widthFix">
									</image>
									<view class="listlity1z1_v">高马尾皮筋一罐</view>
								</view>
								<view class="listlity1z2 flex">
									<image class="listlity1z2_img" src="/static/index/img16.png" mode="widthFix">
									</image>
									<view class="listlity1z2_v">2.0</view>
								</view>
							</view>
						</view>
						<!-- <view class="listlity2">￥<text>26.69</text></view> -->
						<view class="zhen_add">5星、10字以上评价、1~3张实图</view>
						<view class="listlity5 flex">
							<view class="listlity5_v1">补贴24.69</view>
							<view class="listlity5_v2">客返2.0</view>
							<view class="listlity5_v3">万事大吉</view>
						</view>
					</view>
				</view>
				<!-- 下面灰色里的内容 -->
				<view class="xiahu">
					<view class="xiahuc flex flex_between">
						<view class="xiahu1 flex">
							<input type="text" placeholder="请粘贴已付款订单编号(仅数字)" class="xiahu1z" />
							<view class="xiahu1y">提交</view>
						</view>
						<view class="xiahu2 flex">
							<image class="xiahu2_img" src="/static/mine/img16.png" mode="widthFix"></image>
							<view class="xiahu2_v">好评截图</view>
						</view>
					</view>
					<!-- 新增订单 -->
					<view class="addDing flex">
						<image class="addDing_img" src="/static/mine/img17.png" mode="widthFix"></image>
						<view class="addDing_v">新增订单</view>
					</view>
				</view>
			</view>
			<!-- 每一个li -->
			<view class="listli" @click="showTan">
				<view class="listlit flex flex_between">
					<view class="listlitz">
						<image class="listlitz_img" src="/static/index/img14.png" mode="widthFix"></image>
						<!-- <view class="listlitz_1">express</view> -->
						<view class="listlitz_2">乾遇官方旗舰店</view>
					</view>
					<view class="listlity">
						<view class="listlity1 flex flex_between">
							<view class="listlity1z flex flex_between">
								<view class="listlity1z1 flex">
									<image class="listlity1z1_img" src="/static/index/img15.png" mode="widthFix">
									</image>
									<view class="listlity1z1_v">高马尾皮筋一罐</view>
								</view>
								<view class="listlity1z2 flex">
									<image class="listlity1z2_img" src="/static/index/img16.png" mode="widthFix">
									</image>
									<view class="listlity1z2_v">2.0</view>
								</view>
							</view>
						</view>
						<!-- <view class="listlity2">￥<text>26.69</text></view> -->
						<view class="zhen_add">5星、10字以上评价、1~3张实图</view>
						<view class="listlity5 flex">
							<view class="listlity5_v1">补贴24.69</view>
							<view class="listlity5_v2">客返2.0</view>
							<view class="listlity5_v3">万事大吉</view>
						</view>
					</view>
				</view>
				<!-- 下面灰色里的内容 -->
				<view class="xiahu">
					<view class="xiahuc flex flex_between">
						<view class="xiahu1 flex">
							<input type="text" value="240507-268309677613095" placeholder="请粘贴已付款订单编号(仅数字)"
								class="xiahu1z" />
							<view class="xiahu1y huise">修改</view>
						</view>
						<view class="xiahu2 flex">
							<image class="xiahu2_img" src="/static/mine/img16.png" mode="widthFix"></image>
							<view class="xiahu2_v">好评截图</view>
						</view>
					</view>
					<!-- 新增订单 -->
					<view class="addDing flex">
						<image class="addDing_img" src="/static/mine/img17.png" mode="widthFix"></image>
						<view class="addDing_v">新增订单</view>
					</view>
				</view>
			</view>
			<!-- 每一个li -->
			<view class="listli" @click="showTan">
				<view class="listlit flex flex_between">
					<view class="listlitz">
						<image class="listlitz_img" src="/static/index/img14.png" mode="widthFix"></image>
						<!-- <view class="listlitz_1">express</view> -->
						<view class="listlitz_2">乾遇官方旗舰店</view>
					</view>
					<view class="listlity">
						<view class="listlity1 flex flex_between">
							<view class="listlity1z flex flex_between">
								<view class="listlity1z1 flex">
									<image class="listlity1z1_img" src="/static/index/img15.png" mode="widthFix">
									</image>
									<view class="listlity1z1_v">高马尾皮筋一罐</view>
								</view>
								<view class="listlity1z2 flex">
									<image class="listlity1z2_img" src="/static/index/img16.png" mode="widthFix">
									</image>
									<view class="listlity1z2_v">2.0</view>
								</view>
							</view>
						</view>
						<!-- <view class="listlity2">￥<text>26.69</text></view> -->
						<view class="zhen_add">5星、10字以上评价、1~3张实图</view>
						<view class="listlity5 flex">
							<view class="listlity5_v1">补贴24.69</view>
							<view class="listlity5_v2">客返2.0</view>
							<view class="listlity5_v3">万事大吉</view>
						</view>
					</view>
				</view>
				<!-- 下面灰色里的内容 -->
				<view class="xiahu">
					<view class="xiahuc flex flex_between">
						<view class="xiahu1 flex">
							<input type="text" value="240507-268309677613095" disabled placeholder="请粘贴已付款订单编号(仅数字)"
								class="xiahu1z" />
							<view class="xiahu1y hongse">无效</view>
						</view>
						<view class="xiahu2 flex">
							<image class="xiahu2_img" src="/static/mine/img16.png" mode="widthFix"></image>
							<view class="xiahu2_v">好评截图</view>
						</view>
					</view>
					<view class="xiahuc flex flex_between">
						<view class="xiahu1 flex">
							<input type="text" placeholder="请粘贴已付款订单编号(仅数字)" class="xiahu1z" />
							<view class="xiahu1y">提交</view>
						</view>
						<view class="xiahu2 flex">
							<image class="xiahu2_img" src="/static/mine/img16.png" mode="widthFix"></image>
							<view class="xiahu2_v">好评截图</view>
						</view>
					</view>
					<!-- 新增订单 -->
					<view class="addDing flex">
						<image class="addDing_img" src="/static/mine/img17.png" mode="widthFix"></image>
						<view class="addDing_v">新增订单</view>
					</view>
				</view>
			</view>
			<!-- 每一个li -->
			<view class="listli" @click="showTan">
				<view class="listlit flex flex_between">
					<view class="listlitz">
						<image class="listlitz_img" src="/static/index/img14.png" mode="widthFix"></image>
						<!-- <view class="listlitz_1">express</view> -->
						<view class="listlitz_2">乾遇官方旗舰店</view>
					</view>
					<view class="listlity">
						<view class="listlity1 flex flex_between">
							<view class="listlity1z flex flex_between">
								<view class="listlity1z1 flex">
									<image class="listlity1z1_img" src="/static/index/img15.png" mode="widthFix">
									</image>
									<view class="listlity1z1_v">高马尾皮筋一罐</view>
								</view>
								<view class="listlity1z2 flex">
									<image class="listlity1z2_img" src="/static/index/img16.png" mode="widthFix">
									</image>
									<view class="listlity1z2_v">2.0</view>
								</view>
							</view>
						</view>
						<!-- <view class="listlity2">￥<text>26.69</text></view> -->
						<view class="zhen_add">5星、10字以上评价、1~3张实图</view>
						<view class="listlity5 flex">
							<view class="listlity5_v1">补贴24.69</view>
							<view class="listlity5_v2">客返2.0</view>
							<view class="listlity5_v3">万事大吉</view>
						</view>
					</view>
				</view>
				<!-- 下面灰色里的内容 -->
				<view class="xiahu">
					<view class="xiahuc flex flex_between">
						<view class="xiahu1 flex">
							<input type="text" value="240507-268309677613095" disabled placeholder="请粘贴已付款订单编号(仅数字)"
								class="xiahu1z" />
							<view class="xiahu1y huise_2">已补贴</view>
						</view>
						<view class="xiahu2 flex">
							<image class="xiahu2_img" src="/static/mine/img16.png" mode="widthFix"></image>
							<view class="xiahu2_v">已奖励</view>
						</view>
					</view>
					<!-- 新增订单 -->
					<view class="addDing flex">
						<image class="addDing_img" src="/static/mine/img17.png" mode="widthFix"></image>
						<view class="addDing_v">新增订单</view>
					</view>
				</view>
			</view>
			<!-- 每一个li -->
			<view class="listli" @click="showTan">
				<view class="listlit flex flex_between">
					<view class="listlitz">
						<image class="listlitz_img" src="/static/index/img14.png" mode="widthFix"></image>
						<!-- <view class="listlitz_1">express</view> -->
						<view class="listlitz_2">乾遇官方旗舰店</view>
					</view>
					<view class="listlity">
						<view class="listlity1 flex flex_between">
							<view class="listlity1z flex flex_between">
								<view class="listlity1z1 flex">
									<image class="listlity1z1_img" src="/static/index/img15.png" mode="widthFix">
									</image>
									<view class="listlity1z1_v">高马尾皮筋一罐</view>
								</view>
								<view class="listlity1z2 flex">
									<image class="listlity1z2_img" src="/static/index/img16.png" mode="widthFix">
									</image>
									<view class="listlity1z2_v">2.0</view>
								</view>
							</view>
						</view>
						<!-- <view class="listlity2">￥<text>26.69</text></view> -->
						<view class="zhen_add">5星、10字以上评价、1~3张实图</view>
						<view class="listlity5 flex">
							<view class="listlity5_v1">补贴24.69</view>
							<view class="listlity5_v2">客返2.0</view>
							<view class="listlity5_v3">万事大吉</view>
						</view>
					</view>
				</view>
				<!-- 下面灰色里的内容 -->
				<view class="xiahu">
					<view class="xiahuc flex flex_between">
						<view class="xiahu1 flex">
							<input type="text" value="240507-268309677613095" disabled placeholder="请粘贴已付款订单编号(仅数字)"
								class="xiahu1z" />
							<view class="xiahu1y huise_2">已核准</view>
						</view>
						<view class="xiahu2 flex huangse">
							<image class="xiahu2_img" src="/static/mine/img16.png" mode="widthFix"></image>
							<view class="xiahu2_v">好评截图</view>
						</view>
					</view>
					<!-- 新增订单 -->
					<view class="addDing flex">
						<image class="addDing_img" src="/static/mine/img17.png" mode="widthFix"></image>
						<view class="addDing_v">新增订单</view>
					</view>
				</view>
			</view>
			<!-- 每一个li -->
			<view class="listli" @click="showTan">
				<view class="listlit flex flex_between">
					<view class="listlitz">
						<image class="listlitz_img" src="/static/index/img14.png" mode="widthFix"></image>
						<!-- <view class="listlitz_1">express</view> -->
						<view class="listlitz_2">乾遇官方旗舰店</view>
					</view>
					<view class="listlity">
						<view class="listlity1 flex flex_between">
							<view class="listlity1z flex flex_between">
								<view class="listlity1z1 flex">
									<image class="listlity1z1_img" src="/static/index/img15.png" mode="widthFix">
									</image>
									<view class="listlity1z1_v">高马尾皮筋一罐</view>
								</view>
								<view class="listlity1z2 flex">
									<image class="listlity1z2_img" src="/static/index/img16.png" mode="widthFix">
									</image>
									<view class="listlity1z2_v">2.0</view>
								</view>
							</view>
						</view>
						<!-- <view class="listlity2">￥<text>26.69</text></view> -->
						<view class="zhen_add">5星、10字以上评价、1~3张实图</view>
						<view class="listlity5 flex">
							<view class="listlity5_v1">补贴24.69</view>
							<view class="listlity5_v2">客返2.0</view>
							<view class="listlity5_v3">万事大吉</view>
						</view>
					</view>
				</view>
				<!-- 下面灰色里的内容 -->
				<view class="xiahu">
					<view class="xiahuc flex flex_between">
						<view class="xiahu1 flex">
							<input type="text" value="240507-268309677613095" disabled placeholder="请粘贴已付款订单编号(仅数字)"
								class="xiahu1z" />
							<view class="xiahu1y huise_2">已核准</view>
						</view>
						<view class="xiahu2 flex hongse">
							<image class="xiahu2_img" src="/static/mine/img18.png" mode="widthFix"></image>
							<view class="xiahu2_v">无效</view>
						</view>
					</view>
					<!-- 新增订单 -->
					<view class="addDing flex">
						<image class="addDing_img" src="/static/mine/img17.png" mode="widthFix"></image>
						<view class="addDing_v">新增订单</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style scoped lang="scss">
	.guolv {
		width: 100%;
		height: 90rpx;
		border-radius: 20rpx;
		background-color: rgba(255, 255, 255, 1);
		padding: 24rpx 30rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		// margin-top: 20rpx;
    padding-right: 0;
    padding-top: 20rpx;
    z-index: 1;
        position: relative;
		.guolv_v1 {
			color: rgba(0, 0, 0, 1);
			font-size: 28rpx;
		}
	}

	.list {
		width: 100%;
		height: auto;

		.listli {
			width: 100%;
			height: auto;
			border-radius: 20rpx;
			overflow: hidden;
			box-sizing: border-box;
			margin-bottom: 20rpx;

			.listlit {
				background-color: rgba(255, 255, 255, 1);
				padding: 30rpx;
				box-sizing: border-box;
				width: 100%;
				height: auto;
				align-items: normal;

				.listlitz {
					width: 200rpx;
					height: 200rpx;
					border-radius: 20rpx;
					// overflow: hidden;
					position: relative;
					margin-right: 34rpx;

					.listlitz_img {
						width: 200rpx;
						height: 200rpx;
						border-radius: 20rpx;
					}

					.listlity1z1_v {
						width: 300rpx;
					}

					.listlitz_1 {
						position: absolute;
						height: 32rpx;
						border-radius: 0px 40rpx 40rpx 0px;
						background-color: rgba(249, 65, 65, 1);
						display: inline-block;
						color: rgba(255, 255, 255, 1);
						font-size: 24rpx;
						left: 0;
						top: 20rpx;
						line-height: 27rpx;
						padding: 0 10rpx;
					}

					.listlitz_2 {
						width: 100%;
						height: 44rpx;
						line-height: 44rpx;
						border-radius: 0px 0px 10px 10px;
						background-color: rgba(249, 191, 65, 1);
						color: rgba(16, 16, 16, 1);
						font-size: 24rpx;
						overflow: hidden;
						position: absolute;
						bottom: 0;
						text-align: center;
					}
				}

				.listlity {
					width: 500rpx;
					height: auto;

					.listlity1 {
						width: 100%;
						box-sizing: border-box;

						.listlity1z {
							width: 100%;

							.listlity1z1 {
								.listlity1z1_img {
									width: 32rpx;
									height: auto;
									margin-right: 10rpx;
								}

								.listlity1z1_v {
									width: 260rpx;
									height: 40rpx;
									line-height: 40rpx;
									color: rgba(16, 16, 16, 1);
									font-size: 28rpx;
									overflow: hidden;
								}
							}

							.listlity1z2 {
								height: 36rpx;
								line-height: 40rpx;
								border-radius: 40rpx;
								background-color: rgba(216, 30, 6, 1);
								color: rgba(16, 16, 16, 1);
								font-size: 28rpx;
								padding: 0 10rpx;
								padding-right: 20rpx;

								.listlity1z2_img {
									width: 36rpx;
									height: auto;
								}

								.listlity1z2_v {
									color: rgba(255, 255, 255, 1);
									font-size: 28rpx;
									margin-left: 8rpx;
									font-family: 'AvantGardeFont';
								}
							}
						}

					}

					.listlity2 {
						width: 100%;
						padding-right: 30rpx;
						box-sizing: border-box;
						color: rgba(0, 0, 0, 1);
						font-size: 24rpx;
						font-family: 'AvantGardeFont';
						margin-top: 14rpx;

						text {
							font-size: 46rpx;
						}
					}

					.listlity3 {
						width: 100%;
						box-sizing: border-box;
						color: rgba(137, 137, 137, 1);
						font-size: 24rpx;
						margin-top: 42rpx;
						width: 100%;
						text-align: right;
					}

					.listlity4 {
						width: 100%;
						box-sizing: border-box;

						.listlity4cc {
							width: 100%;
							height: 16rpx;
							border-radius: 20rpx;
							margin-top: 6rpx;
							background-color: rgba(232, 230, 230, 1);
							position: relative;
						}

						text {
							width: 30%;
							height: 16rpx;
							border-radius: 20rpx;
							display: inline-block;
							background-color: rgba(249, 191, 65, 1);
							position: absolute;
							top: 0;
							left: 0;
							;
						}
					}

					.listlity5 {
						height: 44rpx;
						line-height: 44rpx;
						overflow: hidden;
						margin-top: 44rpx;

						.listlity5_v1 {
							border-radius: 40px 0px 0px 40px;
							background-color: rgba(232, 230, 230, 1);
							color: rgba(0, 0, 0, 1);
							font-size: 24rpx;
							padding: 0 22rpx;
							line-height: 44rpx;
							height: 44rpx;
							overflow: hidden;
						}

						.listlity5_v2 {
							color: rgba(0, 0, 0, 1);
							font-size: 24rpx;
							background-color: rgba(232, 230, 230, 1);
							padding: 0 22rpx;
							margin: 0 2rpx;
							line-height: 44rpx;
							height: 44rpx;
							overflow: hidden;
						}

						.listlity5_v3 {
							border-radius: 0 40px 40px 0;
							background-color: rgba(249, 191, 65, 1);
							color: rgba(16, 16, 16, 1);
							color: rgba(0, 0, 0, 1);
							font-size: 24rpx;
							padding: 0 22rpx;
							line-height: 44rpx;
							height: 44rpx;
							overflow: hidden;
						}
					}
				}
			}

			.xiahu {
				width: 100%;
				height: auto;
				background-color: rgba(247, 247, 247, 1);
				padding: 30rpx;
				box-sizing: border-box;
				height: auto;

				.xiahuc {
					margin-bottom: 20rpx;
				}

				.xiahu1 {
					.xiahu1z {
						border-radius: 40rpx 0px 0px 40rpx;
						background-color: rgba(238, 238, 238, 1);
						color: rgba(0, 0, 0, 1);
						font-size: 24rpx;
						margin-right: 2rpx;
						height: 56rpx;
						line-height: 56rpx;
						padding: 0 14rpx;
						width: 350rpx;
						word-break: break-word;
						overflow: hidden;
						box-sizing: border-box;
					}

					.xiahu1y {
						width: 112rpx;
						height: 56rpx;
						line-height: 56rpx;
						border-radius: 0px 40rpx 40rpx 0px;
						background-color: rgba(249, 191, 65, 1);
						color: rgba(16, 16, 16, 1);
						font-size: 24rpx;
						text-align: center;
					}

					.xiahu1y.huise {
						background-color: rgba(137, 137, 137, 1);
						color: #fff;
					}

					.xiahu1z.hongse {
						color: rgba(249, 65, 65, 1);
					}

					.xiahu1y.hongse {
						background-color: rgba(249, 65, 65, 1);
						color: #fff;
					}

					.xiahu1y.huise_2 {
						background-color: rgba(232, 230, 230, 1);
						color: rgba(16, 16, 16, 1);
					}

				}

				.xiahu2 {
					width: 180rpx;
					height: 56rpx;
					line-height: 56rpx;
					border-radius: 40rpx;
					background-color: rgba(238, 238, 238, 1);
					color: rgba(16, 16, 16, 1);
					justify-content: center;

					.xiahu2_img {
						width: 32rpx;
						height: auto;
						margin-right: 12rpx;
					}

					.xiahu2_v {
						color: rgba(0, 0, 0, 1);
						font-size: 24rpx;
					}
				}

				.xiahu2.huangse {
					background-color: #F9BF41;
				}

				.xiahu2.hongse {
					background-color: rgba(249, 65, 65, 1);
				}

				.xiahu2.hongse .xiahu2_v {
					color: #fff;
				}

				.addDing {
					width: 100%;
					height: auto;
					margin-top: 24rpx;

					.addDing_img {
						width: 36rpx;
						height: auto;
					}

					.addDing_v {
						color: rgba(0, 0, 0, 1);
						font-size: 24rpx;
					}
				}
			}
		}
	}
	.zhen_add{
		  width: 100%;
		  height: auto;
		  border-radius: 10rpx;
		  background-color: rgba(255,246,228,1);
		  color: rgba(0,0,0,1);
		  font-size: 24rpx;
		  padding: 10rpx 16rpx;
		  box-sizing: border-box;
		  margin-top: 20rpx;
	}
</style>